<template>
	<view class="invitations-class" v-if="Object.keys(invitationsInfo).length"
		:style="{'background-image': 'url('+ShareImg.invitationsBack+')'}">
		<!-- 'padding-top': phoneHieght -->
		<!-- <u-navbar title="商品详情" :autoBack="true" :bgColor="'#2f1969'">
		</u-navbar> -->
		<view></view>
		<view class="top-area">
			<image :src="ShareImg.invitationsTitle" class="invite-pic" mode="scaleToFill"></image>
		</view>
		<view class="image-area">
			<image :src="invitationsInfo.pic" class="invite-pic" mode="scaleToFill"></image>
		</view>
		<view class="btn-area column-center-flex">
			<view class="btn column-center-flex" :style="{'background-image': 'url('+ShareImg.btnBack+')'}"
				@tap="invite">立即邀请</view>
		</view>
		<view class="reward-area column-center-flex">
			<view class="title-back">
				<image :src="ShareImg.left" class="one" mode="scaleToFill"></image>
				<view :style="{'background-image': 'url('+ShareImg.rewardTitleBack+')'}" class="two">邀请奖励</view>
				<!-- <image :src="ShareImg.rewardTitleBack1" class="two" mode="scaleToFill"></image> -->
				<image :src="ShareImg.right" class="three" mode="scaleToFill"></image>
			</view>
			<view class="reward-bottom main-space-around">
				<view :style="{'background-image': 'url('+ShareImg.rewardBack+')'}">
					<view class="reward-text">好友成功注册你可得</view>
					<view class="reward">
						<swiper class="swiper-box" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
							<swiper-item v-for="(item, index) in invitationsInfo.reg_send" :key="index" class="reward-desc column-center-flex">
								<image :src="CouponsImgObj[item.type]" class="reward-top_1" mode="scaleToFill"></image>
								<text class="desc-text">{{ item.name + ' ' + (item.type === 'balance' ? item.value : '* ' + item.num)}}</text>
								<!-- <view class="swiper-item" :style="{'background-image': 'url('+CouponsImgObj[item.type]+')'}">
								</view> -->
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view :style="{'background-image': 'url('+ShareImg.rewardBack+')'}">
					<view class="reward-text">好友首次买盲盒你可得</view>
					<view class="reward">
						<swiper class="swiper-box" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
							<swiper-item v-for="(item, index) in invitationsInfo.first_buy_send" :key="index" class="reward-desc column-center-flex">
								<image :src="CouponsImgObj[item.type]" class="reward-top_1" mode="scaleToFill"></image>
								<text class="desc-text">{{ item.name + ' ' + (item.type === 'balance' ? item.value : '* ' + item.num)}}</text>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="how-to-invitations column-center-flex">
			<!-- <view class="title-back">
				<image :src="ShareImg.left" class="one" mode="scaleToFill"></image>
				<view :style="{'background-image': 'url('+ShareImg.rewardTitleBack+')'}" class="two">如何邀请</view>
				<image :src="ShareImg.right" class="three" mode="scaleToFill"></image>
			</view>
			<image class="how_2" :src="share_img"></image> -->
			<view class="main-space-around share-view">
				<view class="column-center-flex">
					<image :src="ShareImg.share1" class="prog-img" mode="scaleToFill"></image>
					<view class="share-text">点击立即邀请按钮</view>
					<view class="share-text">向好友发送链接</view>
				</view>
				<image :src="ShareImg.arrow" class="arrow-img" mode="scaleToFill"></image>
				<view class="column-center-flex">
					<image :src="ShareImg.share2" class="prog-img" mode="scaleToFill"></image>
					<view class="share-text">好友打开链接</view>
					<view class="share-text">马上注册下载</view>
				</view>
				<image :src="ShareImg.arrow" class="arrow-img" mode="scaleToFill"></image>
				<view class="column-center-flex">
					<image :src="ShareImg.share3" class="prog-img" mode="scaleToFill"></image>
					<view class="share-text">回到本页</view>
					<view class="share-text">确认邀请关系</view>
				</view>
			</view>
		</view>
		<view class="my-invitations column-center-flex">
			<!-- <image class="title-img" :src="my_img"></image> -->
			<view class="title-back">
				<image :src="ShareImg.left" class="one" mode="scaleToFill"></image>
				<view :style="{'background-image': 'url('+ShareImg.rewardTitleBack+')'}" class="two">我的邀请</view>
				<!-- <image :src="ShareImg.rewardTitleBack1" class="two" mode="scaleToFill"></image> -->
				<image :src="ShareImg.right" class="three" mode="scaleToFill"></image>
			</view>
			<view class="my-invitations-content">
				<view class="top">
					<view @tap="tabChange(1)" class="column-center-flex">
						<text class="top-text">我的奖励</text>
						<view v-if="curTab === 1" class="underline"></view>
					</view>
					<view @tap="tabChange(2)" class="column-center-flex">
						<text class="top-text">我的朋友</text>
						<view v-if="curTab === 2" class="underline"></view>
					</view>
				</view>
				<scroll-view class="list" scroll-y @scrolltolower="getMoreData">
					<!-- 我的奖励 -->
					<view v-if="curTab === 1" class="view-container">
						<view class="list-item" v-for="(item, index) in sendList" :key="index">
							<view class="left">
								<view class="left-text_1">好友***注册成功</view>
								<view class="left-text_2">{{ item.create_time }}</view>
							</view>
							<view class="right-view column-center-flex">
								<view v-for="(child, jndex) in item.reward_content" :key="jndex" class="right">
									{{ `${child.name} ${child.type === 'balance' ? child.value : (child.num === 1 ? '' : '* ' + child.num)}` }}
									<!-- {{ child.name + ' ' + (child.type === 'balance' ? child.value : (child.num === 1 ? '' : '*' + child.num)) }} -->
								</view>
							</view>
						</view>
					</view>
					<!-- 我的朋友 -->
					<view v-else class="view-container">
						<view class="list-item" v-for="(item, index) in sendList" :key="index">
							<view class="friend-item">
								<image class="friend-head-img" :src="item.avatar" mode="scaleToFill"></image>
								<view class="nickname">{{ item.nickname || '' }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<share ref="sharePopup" @qrcode="shareQrCode"></share>

		<!-- 分享二维码 -->
		<template v-if="canvasStatus">
			<view class="qr-code" @click="closeCode">
				<view class="container" @click.stop="stopCode">
					<view class="img-list">
						<canvas class="canvas" canvas-id="myCanvas"></canvas>
					</view>
					<!-- 保存按钮 分享 -->
					<!-- #ifndef H5 -->
					<view class="save-share">
						<block v-for="(item, index) in btnList" :key="index">
							<view class="btn-item" :key="index">
								<view class="uni-share-button-box" @click="shareClickBtn(item)">
									{{ item.text }}
								</view>
							</view>
						</block>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</template>
	</view>	
</template>

<script>
	import baseUrl from '../../utils/siteInfo';
	import {mapGetters, mapState} from 'vuex';
	import { CouponsImgObj, ShareImg, SharePostersImg } from '../../utils/objectValue';
	import { getInvitationsInfo, getMyReward, getMyFriends, getQrcode } from '@/api/invitations.js';
	import Share from '@/components/invitations/share';
	import utils from '@/utils/canvasUtils.js';
	import { drawImg } from '@/utils/appqrCode.js';

	export default {
		components: {
			Share
		},
		data() {
			return {
				reward_img: baseUrl.imgroot + '/static/images/invitations/invitations-reward.png',
				coupon_img: baseUrl.imgroot + '/static/images/coupons/coupons1.png',
				guarantees_img: baseUrl.imgroot + '/static/images/invitations/guarantees.png',
				how_img: baseUrl.imgroot + '/static/images/invitations/how-get.png',
				share_img: baseUrl.imgroot + '/static/images/invitations/share.png',
				my_img: baseUrl.imgroot + '/static/images/invitations/my-invitations.png',
				curTab: 1,
				sendList: [],
				invitationsInfo: {},
				pager: {
					page: 1,
					limit: 10
				},
				total: 0,
				hasMore: false,
				apiRequest: {
					1: getMyReward,
					2: getMyFriends
				},
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				CouponsImgObj,
				ShareImg,

				canvasStatus: false,
				posterSrc: '',
				btnList: [
					{
						id: 1,
						text: '保存到手機'
					}
				],
				imgList: [SharePostersImg.back], // 背景
				shareUrl: ''
			};
		},
		computed: {
			...mapGetters('phone', {
				phoneHieght: 'phoneHieght'
			})
		},
		onLoad() {
			this.getInvitationsInfo();
			this.getSendList(true);
		},
		methods: {
			invite() {
				this.$refs.sharePopup.open();
			},
			tabChange(type) {
				console.log('type-', type);
				this.curTab = type;
				this.pager.page = 1;
				this.sendList = [];
				this.getSendList();
			},
			getMoreData() {
				console.log('more');
				if (this.hasMore) {
					this.getSendList();
				}
			},
			getSendList(isFirst = false) {
				const params = {
					page: this.pager.page,
					limit: this.pager.limit
				};
				this.apiRequest[isFirst ? 1 : this.curTab](params).then(res => {
					const {code, data} = res;
					if(code == 0) {
						const {total = 0, last_page, data: listData = []} = data;
						this.total = total;
						if (this.pager.page < last_page) {
							this.pager.page++;
							this.hasMore = true;
						} else {
							this.hasMore = false;
						}
						if (listData.length) {
							this.sendList = this.sendList.concat(listData);
						}
					}
				}).catch(err => {
					
				});
			},
			getInvitationsInfo() {
				getInvitationsInfo().then(res => {
					const {code, data} = res;
					if(code == 0) {
						this.invitationsInfo = {...data};
						const {reg_send = [], first_buy_send = []} = data;
					}
				}).catch(err => {
					
				});
			},
			// 关闭二维码
			closeCode(){
				this.canvasStatus = false;
			},
			stopCode() {},
			async shareQrCode() {
				// #ifdef MP
				// 小程序使用接口获取二维码     
				const {code, data, msg} = await getQrcode({
					path: 'pages/index/index',
					blindbox_id: 0 // 默认传0
				});
				if(code == 0) {
					// 先下载 然后生成
					uni.downloadFile({
						url: data,
						success: (info) => {
							if (info.statusCode === 200) {
								this.generateCanvas(info.tempFilePath);
							}
						}
					});
				} else {
					uni.hideLoading();
					setTimeout(() => {
						uni.showToast({
							title: msg,
							icon: 'error',
							mask: false
						});
					},10);
				}
				// #endif

				// #ifndef MP
				// app h5用qrcode画布生成页面
				const codeImg = this.createQrcode();
				this.generateCanvas(codeImg);
				// #endif
			},
			// app h5生成二维码
			createQrcode() {
				const userInfo = uni.getStorageSync('userInfo');
				const id1 = Base64.encode(JSON.stringify(userInfo.id));
				const id2 = Base64.encode(id1);
				this.shareUrl = window.location.protocol + '//' + window.location.host + '/#/pages/index/index?agent_user_id=' + id2;
				console.log('shareUrl-', this.shareUrl);
				const imgData = drawImg(this.shareUrl, {size: 280});
				return imgData;
			},
			generateCanvas(qrcode) {
				this.canvasStatus = true;
				utils.poster2canvas({imgList: this.imgList, qrcode}, (res) => {
					uni.hideLoading();
					this.posterSrc = res;
				});
			},
			// 分享+保存到相册
			shareClickBtn(item){
				if(item.id == 1){
					// 保存到相册
					this.savePicture();
				}
			},
			// 保存到本地
			savePicture() {
				uni.downloadFile({
					url: this.posterSrc, // 图片地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失敗",
										icon: "none"
									});
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.invitations-class {
	width: 100%;
	height: 1290px;
	padding-bottom: env(safe-area-inset-bottom);
	// padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	background-size: 100% 100%;

	.image-area{
		width: 100%;
		height: 19%;
		background: transparent;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		.invite-pic {
			width: 200px;
			height: 200px;
		}
	}
	.top-area{
		width: 100%;
		height: 11%;
		background: transparent;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		image{
			width: 236px;
			height: 79px;
		}
	}
	.btn-area {
		width: 100%;
		height: 55px;
		.btn {
			width: 159px;
			height: 48px;
			background-size: 100% 100%;
			// background: linear-gradient(to right, #724BFF, #FF4B77);
			// border: 0.5px solid #724BFF;
			color: #FFFFFF;
			font-family: BTH;
			font-size: 28px;
		}
	}

	.title-back {
		width: 82%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		.one {
			width: 73px;
			height: 11px;
		}
		.two {
			width: 182px;
			height: 38px;
			font-size: 28px;
			font-family: BTH;
			font-weight: 400;
			line-height: 36px;
			text-align: center;
			// text-shadow: 5px 4px 4px rgba(45, 1, 226, 0.5);
			color: #F5CDFF;

			// text-shadow: 5px 4px 4px rgba(45,1,226,0.5);
			// color: linear-gradient(180deg, #FFFFFF 0%, #F5CDFF 100%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			// display: flex;
			// align-items: center;
			// justify-content: center;
		}
		.three {
			width: 44px;
			height: 19px;
		}
	}

	.reward-area {
		width: 100%;

		.reward-top {
			width: 330px;
			height: 72px;
			// background-image: url(http://dev-hashmart.mstshop.cn/static/images/invitations/invitations-reward.png);
			// background-size: 100% 100%;
		}
		.reward-bottom {
			width: 100%;
			margin-top: 15px;
		}
		.reward-bottom > view{
			// width: 170px;
			width: 40%;
    		height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-size: 100% 100%;
		}
		.reward-text {
			width: 100%;
			height: 41px;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 13px;
			letter-spacing: -0.5px;
			font-family: PingFangHK-Semibold;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			line-height: 41px;
		}
		.reward {
			width: 100%;
			height: calc(100% - 41px);
			padding: 0 4px;
		}
		.swiper-box{
			height: 100%;
		}
		.reward-top_1 {
			width: 77px;
			height: 55px;
		}
		.reward-top_2 {
			width: 72px;
			height: 63px;
		}
		.reward-img {
			width: 100%;
			// height: calc(100% - 25px);
		}
		.reward-desc{
			height: 25px;
			overflow-wrap: break-word;
			color: #4C3492;
			font-size: 14px;
			font-family: PingFangHK-Regular;
			white-space: nowrap;
			margin-top: 4px;
		}
		.desc-text {
			padding-top: 5px;
		}
	}

	.title-img{
		width: 333px;
		height: 72px;
	}
	.how-to-invitations {
		width: 100%;
		padding: 30px 24px 0;
		.how_2 {
			margin-top: 20px;
			width: 343px;
			height: 141px;
		}
	}
	.share-view{
		width: 100%;
		height: 141px;
		background: linear-gradient(to bottom, #FCFDFF, #E2EAFD);;
		border-radius: 10px;
		.prog-img {
			margin-bottom: 8px;
			width: 36px;
			height: 36px;
		}
		.arrow-img{
			margin-top: 52px;
			width: 25px;
			height: 11px;
		}
		.share-text{
			margin-top: 8px;
			font-size: 12px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #4C3492;
		}
	}
	.share-view > view {
		width: calc(100% - 50px) / 3;
	}

	.my-invitations {
		width: 100%;
		padding-top: 30px;

		.my-invitations-content {
			width: 80%;
			height: 228px;
			margin-top: 20px;
			background: linear-gradient(to bottom, #FCFDFF, #E2EAFD);
			border: 2px solid #FFFFFF;
			border-radius: 10px;
		}
		.top{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.top-text {
			overflow-wrap: break-word;
			color: #4C3492;
			font-size: 18px;
			font-family: PingFangHK-Semibold;
			font-weight: 600;
			white-space: nowrap;
			z-index: 9;
		}
		.underline {
			width: 78px;
			margin-top: -7px;
    		height: 8px;
    		background: linear-gradient(90deg, #FFCB00 0%, #FEFBFF 98%);
		}
		.list{
			width: 100%;
			height: calc(100% - 50px);
			padding: 0 15px;
		}
		.view-container {
			width: 100%;
		}
		.list-item {
			width: 100%;
			height: 90px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-bottom: 0.5px dashed #B2B2B2;
		}
		.list-ite > view {
			width: 50%;
		}
		.left {
			width: 45%;
		}
		.right-view {
			width: 55%;
		}
		.left-text_1 {
			overflow-wrap: break-word;
			color: rgba(54, 54, 54, 1);
			font-size: 16px;
			font-family: PingFangHK-Regular;
			white-space: nowrap;
			line-height: 22px;
		}
		.left-text_2 {
			margin-top: 5px;
			overflow-wrap: break-word;
			color: rgba(159, 159, 159, 1);
			font-size: 12px;
			font-family: PingFangHK-Regular;
			white-space: nowrap;
			line-height: 17px;
		}
		.right{
			overflow-wrap: break-word;
			color: rgba(124, 108, 228, 1);
			font-size: 14px;
			font-family: PingFangHK-Regular;
			white-space: nowrap;
			line-height: 22px;
			text-align: center;
		}
		.friend-item {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20px;
		}
		.friend-head-img {
			width: 31px;
			height: 31px;
		}
		.nickname {
			padding-left: 10px;
			font-size: 16px;
			font-family: PingFangHK-Regular, PingFangHK;
			font-weight: 400;
			color: #363636;
		}
	}

	.qr-code{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #1D1F36;
		display: flex;
		justify-content: center;
		align-items: center;
		.container{
			width: 594rpx;
			.img-list{
				width: 594rpx;
				height: 826rpx;
				margin: 30rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				.canvas {
					width: 594rpx;
					height: 826rpx;
				}
			}
			.save-share{
				display: flex;
				justify-content: center;
				align-items: center;
				.btn-item{
					position: relative;
					width: 299rpx;
					height: 91rpx;
					.uni-share-button-box{
						width: 100%;
						height: 100%;
						background: linear-gradient(270deg, #8F0CF2 0%, #AF3DFC 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						font-size: 32rpx;
						font-family: PingFangHK-Medium-Regular, PingFangHK-Medium;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 91rpx;
						text-align: center;
					}
					image{
						width: 100%;
						height: 100%;
					}
					.text{
						width: 100%;
						height: 90rpx;
						line-height: 90rpx;
						background-color: transparent;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						z-index: 9;
						font-size: 34rpx;
						font-family: BTH;
						font-weight: 400;
						color: #FFFFFF;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
}
</style>